<div layout="column" layout-align="center" ng-style="{'width': '100%'}" ng-controller="LoginController as vm">
    <div class='md-padding' layout="row" layout-align="center" flex-offset-sm="0" flex-offset-md="0" flex-offset-lg="0" flex-offset-gt-lg="0" layout-wrap >
        <md-card  class="md-whiteframe-9dp LoginBox"  layout-padding>
            <form name="LoginForm">
                <md-card-content layout="column">

                    <img class="logo" src="../../images/favicon.png"  />
                    <br />
                    <br />
                    <md-input-container class="md-icon-float md-block  inputValidation">
                        <label>Username</label>
                        <input required ng-model="vm.user" type="email" name="username" ng-pattern="/^.+@.+\..+$/" minlength="10" maxlength="100">
                        <div ng-messages="LoginForm.username.$error" role="alert">
                            <div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
                                Your username is required and must be an email address
                            </div>
                        </div>
                    </md-input-container>
                    <md-input-container class="md-icon-float md-block md-accent">
                        <label>Password</label>
                        <input ng-model="vm.password" type="password" name="password" ng-minlength="6" required>
                        <div ng-messages="LoginForm.password.$error" role="alert">
                            <div ng-message-exp="['required', 'minlength']">
                                Your password is required
                            </div>
                        </div>
                    </md-input-container>
                    <div></div>

                </md-card-content>
                <md-card-footer>
                    <label class="ErrText">{{vm.ErrorMessage}}</label>
                    <div class="md-actions" layout="row" layout-align="space-around center">
                        <md-button class="md-accent small-text" ng-click="vm.FPClick()">Forgot Password?</md-button>
                        <span flex></span>
                        <md-button type="submit" class="md-raised md-primary" ng-click="vm.LoginClick()" ng-disabled="LoginForm.$invalid">Login</md-button>
                    </div>
                </md-card-footer>
            </form>
        </md-card>
    </div>
</div>